<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>购物车</h3>
<input type="checkbox" value="5000">华为手机5000元<br>
<input type="checkbox" value="3000">小米电视3000元<br>
<input type="checkbox"  value="80">罗技鼠标80元<br>
<input type="checkbox" value="2000">苹果电脑2000元<br>
<input type="checkbox" id="all">全选
<p>总价:0元</p>

<script src="./jq/jquery-1.4.2.min.js"></script>
<script>
//给所有的多选框添加点击事件
    $("input").click(function () {
        if (this.id=="all"){//找到全选
            //把全选的状态取出
            let status = $(this).attr("checked");
            //给到其它几个多选框
            $(this).siblings("input").attr("checked",status);
        }

        //计算总价
        let total = 0;
        //统计打钩的数量
        let count = 0;
        //得到除了全选的所有的多选框,并遍历
        $("input:not(#all)").each(function () {
            //this代表当前遍历的每一个多选框
            //判断出是否选中
            if($(this).attr("checked")){//选中了
                count++;
                let money = $(this).val()*1;//取出选中的多选框的value
                total+=money;//把得到的money累加到一起
            }
        })
        $("p").text("总价:"+total+"元");//将统计的结果显示
        //让全选的状态和打钩数量建立关系
        $("#all").attr("checked",count==4);


    })
</script>
</body>
</html>